<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1 v-if="isShow" v-bind:title="tit">{{ msg }}</h1>
<!--  <input id="t" type="text" v-bind:value="msg">-->
<!--  <button v-on:click="handleChange">submit</button>-->
  <input type="text" v-model="msg">
  <button v-on:click="handleChange">submit</button>
  <br>
<!--  <button v-on:click="isShow = !isShow">toggle h1 show</button>-->
  <button v-on:click="toggleH1">toggle h1 show</button>
  <ul>
    <li v-for="item in todos">
      {{ item }}
    </li>
  </ul>
</div>

<!--
<div id="app1">
  <h1>{{ msg }}</h1>
</div>-->

<script src="./vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      isShow: true,
      msg: 'hello vue',
      tit: '我是测试的提示文字',
      count: 0,
      list: [],
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    },
    methods: {
      toggleH1() {
        this.isShow = !this.isShow
        console.log(this.isShow)
      },
      handleChange() {
        if (!this.msg) {
          alert('不能为空')
        } else {
          this.todos.push({ text: this.msg })
          this.msg = ''
        }

        // console.log(this.msg)

        // console.log(document.getElementById('t'))
      }
    }
  })

  /*const app1 = new Vue({
    el: '#app1',
    data: {
      msg: 'hello vue',
      count: 0,
      list: []
    }
  })
  console.log(app)*/


</script>

</body>
</html>